<!--  -->
<template>
  <el-dialog
    v-if="showDialog"
    v-model="showDialog"
    width="1030"
    :append-to="getBody"
    @close="closeDialog"
    @opened="openedDialog"
    :destroy-on-close="true"
    top="5rem"
    :z-index="99999"
    class="DialogBox"
  >
    <div class="h-[548px] w-full overflow-hidden relative">
      <slot></slot>
    </div>
    <template #header>
      <div class="text-center text-xl">{{ title }}</div>
    </template>
    <template #footer> </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, toRefs } from 'vue'
import { ref, watch } from 'vue'

type Props = {
  title: string
  show: boolean
}
const props = withDefaults(defineProps<Props>(), {
  title: '标题',
  show: false
})
const { show } = toRefs(props)
const showDialog = ref(false)
watch(
  show,
  (nVal) => {
    showDialog.value = nVal
  },
  {
    immediate: true
  }
)

interface Emits {
  (e: 'close', value: boolean): void
  (e: 'opened', value: boolean): void
}
const emit = defineEmits<Emits>()
const closeDialog = () => {
  emit('close', true)
}
const openedDialog = () => {
  emit('opened', true)
}

const getBody = computed(() => {
  const dom = document.getElementById('dom-scale')
  return dom ?? 'body'
})
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
